import React, { PropTypes } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  Platform,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import NavCon from '../Public/NavCon';

const dataModel = [
  {
    id: 1,
    title: '对外分享',
    subTitle: '总次数',
    wchat: 0,
    qq: 0,
    weibo: 0,
  },
  {
    id: 2,
    title: '前来注册',
    subTitle: '总人数',
    wchat: 0,
    qq: 0,
    weibo: 0,
  },
  {
    id: 3,
    title: '语音沟通',
    subTitle: '总人数',
    wchat: 0,
    qq: 0,
    weibo: 0,
  },
  {
    id: 4,
    title: '拓客下单',
    subTitle: '总人数',
    wchat: 0,
    qq: 0,
    weibo: 0,
  },
  {
    id: 5,
    title: '拓客预约试驾',
    subTitle: '总人数',
    wchat: 0,
    qq: 0,
    weibo: 0,
  },
  {
    id: 6,
    title: '实际到店',
    subTitle: '总人数',
    wchat: 0,
    qq: 0,
    weibo: 0,
  },
];

class Item extends React.Component {
  static propTypes = {
    title: PropTypes.string,
    subTitle: PropTypes.string,
    wchat: PropTypes.number,
    qq: PropTypes.number,
    weibo: PropTypes.number,
  };
  render() {
    return (
      <View style={styles.item}>
        <View style={styles.top14}>
          <Text style={[styles.left18, styles.font1]}>
            {this.props.title}
            <Text style={[styles.font2]}>({this.props.subTitle})</Text>
          </Text>
        </View>
        <View style={[styles.row, styles.top14, styles.list]}>
          <View style={styles.row}>
            <Image
              source={require('../../img/share_wchat.png')}
            />
            <Text style={[styles.font3, styles.left6]}>{this.props.wchat}</Text>
          </View>
          <View style={styles.row}>
            <Image
              source={require('../../img/share_qq.png')}
            />
            <Text style={[styles.font3, styles.left6]}>{this.props.qq}</Text>
          </View>
          <View style={styles.row}>
            <Image
              source={require('../../img/share_webo.png')}
            />
            <Text style={[styles.font3, styles.left6]}>{this.props.weibo}</Text>
          </View>
        </View>
      </View>
    );
  }
}

class List extends React.Component {
  render() {
    return (
      <ScrollView style={styles.flex}>
        {dataModel.map(data => (
          <Item
            key={data.id}
            title={data.title}
            subTitle={data.subTitle}
            wchat={data.wchat}
            qq={data.qq}
            weibo={data.weibo}
          />
              ))}
      </ScrollView>
    );
  }
}


export default class SocialMedia extends React.Component {

  render() {
    return (
      <View style={[styles.flex, styles.titleTop]}>
        <NavCon
          backName={''}
          currentTitle={'定向拓客'}
          bgColor={'#fff'}
          onPress={() => this.props.navigator.pop()}
        />
        <View style={{ flex: 1, backgroundColor: '#f5f5f5' }}>
          <List />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  list: {
    justifyContent: 'space-between',
    paddingLeft: PxToDp(18),
    paddingRight: PxToDp(30),
  },
  item: {
    flex: 1,
    height: PxToDp(96),
    backgroundColor: '#fff',
    marginTop: PxToDp(12),
  },
  top14: {
    marginTop: PxToDp(14),
  },
  left18: {
    paddingLeft: PxToDp(18),
  },
  left6: {
    marginLeft: PxToDp(6),
  },
  font1: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  font2: {
    fontSize: 12,
    fontWeight: '100',
  },
  font3: {
    fontSize: 20,
    fontWeight: '500',
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },

});
